<template>
	<echartBox title="重点大客户" width="601px" height="427px">
		<div class="table-container">
			<div class="table-wrapper">
				<table class="customer-table">
					<thead>
						<tr>
							<th>序号</th>
							<th>客户名称</th>
							<th>用气量（万/m³）</th>
						</tr>
					</thead>
				</table>
				<div class="table-body-wrapper" ref="tableBodyWrapper">
					<div class="table-body-scroll" ref="tableBodyScroll" :class="{ 'no-transition': isTransitioning }" :style="{ transform: `translateY(${scrollOffset}px)` }">
						<table class="customer-table-body">
							<tbody>
								<tr v-for="(item, index) in extendedData" :key="`${item.id}-${index}`" :class="{ 'highlighted': index % 2 === 1 }">
									<td class="col-id">{{ item.id }}</td>
									<td class="col-name">{{ item.customerName }}</td>
									<td class="col-usage">{{ item.gasUsage }}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</echartBox>
</template>

<script>
import echartBox from "../echart-box.vue";

export default {
	name: "Page2ItemBox11",
	components: {
		echartBox,
	},
	props: {
		securityData: {
			type: Array,
			required: false,
			default: () => []
		}
	},
	data() {
		return {
			extendedData: [],
			scrollTimer: null,
			scrollOffset: 0,
			rowHeight: 40,
			visibleRows: 8,
			currentScrollPosition: 0,
			isTransitioning: false
		}
	},
	mounted() {
		this.initScrollData();
		this.startAutoScroll();
	},
	beforeDestroy() {
		this.stopAutoScroll();
	},
	methods: {
		initScrollData() {
			if (this.securityData.length === 0) return;
			
			// 创建扩展数据，包含原始数据的多个副本以实现无缝循环
			// 为了确保无缝滚动，需要足够的数据副本
			this.extendedData = [];
			const copies = Math.max(4, Math.ceil((this.visibleRows + 2) / this.securityData.length) + 2);
			for (let copy = 0; copy < copies; copy++) {
				this.extendedData.push(...this.securityData);
			}
		},
		startAutoScroll() {
			this.scrollTimer = setInterval(() => {
				this.scrollTable();
			}, 2000); // 每2秒滚动一次
		},
		stopAutoScroll() {
			if (this.scrollTimer) {
				clearInterval(this.scrollTimer);
				this.scrollTimer = null;
			}
		},
		scrollTable() {
			if (this.securityData.length <= this.visibleRows) {
				return; // 如果数据少于可见行数，不需要滚动
			}
			
			if (this.isTransitioning) {
				return; // 如果正在转换中，跳过本次滚动
			}
			
			// 向上滚动一行
			this.currentScrollPosition += this.rowHeight;
			
			// 检查是否需要重置位置（当滚动到第一个副本的末尾时）
			const originalDataLength = this.securityData.length;
			const singleCycleHeight = originalDataLength * this.rowHeight;
			
			// 当滚动超过一个完整周期时，无缝重置到开始位置
			if (this.currentScrollPosition >= singleCycleHeight) {
				// 先设置过渡动画完成当前滚动
				this.scrollOffset = -this.currentScrollPosition;
				
				// 等待当前滚动动画完成后，无缝重置位置
				this.isTransitioning = true;
				setTimeout(() => {
					// 禁用过渡动画并重置位置
					this.currentScrollPosition = 0;
					this.scrollOffset = 0;
					// 短暂延迟后重新启用过渡动画
					setTimeout(() => {
						this.isTransitioning = false;
					}, 50);
				}, 800); // 与CSS动画时间一致
			} else {
				this.scrollOffset = -this.currentScrollPosition;
			}
		}
	},
	watch: {
		securityData: {
			handler() {
				this.initScrollData();
			},
			immediate: true
		}
	}
};
</script>

<style scoped lang="scss">
.table-container {
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.table-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.customer-table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	
	thead {
		tr {
			background: #46a6cc;
			height: 45px;
			
			th {
				color: #ffffff;
				font-size: 18px;
				font-weight: 500;
				text-align: center;
				padding: 0 15px;
				// border: 1px solid rgba(255, 255, 255, 0.2);
				
				&:first-child {
					width: 80px;
				}
				&:nth-child(2) {
					width: 250px;
				}
				&:last-child {
					width: auto;
				}
			}
		}
	}
}

.table-body-wrapper {
	width: 100%;
	height: 320px;
	overflow: hidden;
	position: relative;
}

.table-body-scroll {
	transition: transform 0.8s ease-in-out;
	
	&.no-transition {
		transition: none;
	}
}

.customer-table-body {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	
	tbody {
		tr {
			height: 40px;
			background: transparent;
			
			&.highlighted {
				background: rgba(61, 68, 122, 0.3);
			}
			
			&:hover {
				background: rgba(61, 68, 122, 0.5);
			}
			
			td {
				color: #ffffff;
				font-size: 16px;
				text-align: center;
				padding: 0 15px;
				// border: 1px solid rgba(61, 68, 122, 0.5);
				border-top: none;
			}
		}
	}
}

// 列样式
.col-id {
	color: #00d4ff !important;
	font-weight: 500;
	width: 80px;
}

.col-name {
	color: #ffffff !important;
	width: 250px;
}

.col-usage {
	color: #00ff88 !important;
	font-weight: 500;
	width: auto;
}
</style>